import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import pRightGray from '@/images/common/rightGray.svg';
import './index.scss';

const AgreementList = ({
  dispatch,
  agreementVersionAcess,
  agreementInfoAccess,
  agreementInfoLogin,
  agreementVersionLogin,
}) => {
  const getAgreementVersionAccess = () => {
    dispatch({
      type: 'otherApi/getAgreementInfoVersionModel',
      payload: { type: 1 },
    });
  };

  const getAgreementInfoAccess = () => {
    dispatch({
      type: 'otherApi/getAgreementInfoModel',
      payload: { type: 1 },
    });
  };

  const getAgreementVersionLogin = () => {
    dispatch({
      type: 'otherApi/getAgreementInfoVersionModel',
      payload: { type: 2 },
    });
  };

  const getAgreementInfoLogin = () => {
    dispatch({
      type: 'otherApi/getAgreementInfoModel',
      payload: { type: 2 },
    });
  };

  useEffect(() => {
    getAgreementVersionAccess();
    getAgreementInfoAccess();
    getAgreementVersionLogin();
    getAgreementInfoLogin();
  }, []);

  const handleAgreement = (agreementName) => {
    let agreementDetail = null;
    if (agreementInfoAccess?.agreements?.length > 0) {
      for (let i = 0; i < agreementInfoAccess?.agreements?.length; i++) {
        if (agreementInfoAccess.agreements[i].name == agreementName) {
          agreementDetail = agreementInfoAccess.agreements[i];
          break;
        }
      }
    }
    if (agreementDetail == null && agreementInfoLogin?.agreements?.length > 0) {
      for (let i = 0; i < agreementInfoLogin?.agreements?.length; i++) {
        if (agreementInfoLogin.agreements[i].name == agreementName) {
          agreementDetail = agreementInfoLogin.agreements[i];
          break;
        }
      }
    }
    if (agreementDetail == null) {
      return;
    }
    dispatch({
      type: 'otherApi/setAgreementDetail',
      payload: { ...agreementDetail },
    });
    Taro.navigateTo({ url: '/mainSubPack/agreement/index' });
  };

  return (
    <View className="agreementList flex-column">
      {agreementVersionAcess?.existed &&
        agreementInfoAccess?.agreements?.length > 0 &&
        agreementInfoAccess?.content?.parseData?.length > 0 &&
        agreementInfoAccess?.content?.parseData.map((item) => {
          if (item?.type == 'link') {
            return (
              <View
                className="item flex-row-spaceBetween-center"
                onClick={() => handleAgreement(item?.agreement)}
              >
                <Text className="txt28">{item?.agreement ?? ''}</Text>
                <Image className="arrow" src={pRightGray}></Image>
              </View>
            );
          }
        })}
      {agreementVersionLogin?.existed &&
        agreementInfoLogin?.agreements?.length > 0 &&
        agreementInfoLogin?.content?.parseData?.length > 0 &&
        agreementInfoLogin?.content?.parseData.map((item) => {
          if (item?.type == 'link') {
            return (
              <View
                className="item flex-row-spaceBetween-center"
                onClick={() => handleAgreement(item?.agreement)}
              >
                <Text className="txt28">{item?.agreement ?? ''}</Text>
                <Image className="arrow" src={pRightGray}></Image>
              </View>
            );
          }
        })}
    </View>
  );
};

export default connect(({ otherApi }) => ({
  agreementVersionAcess: otherApi.agreementVersionAcess,
  agreementInfoAccess: otherApi.agreementInfoAccess,
  agreementInfoLogin: otherApi.agreementInfoLogin,
  agreementVersionLogin: otherApi.agreementVersionLogin,
}))(AgreementList);
